<template>
  <el-scrollbar class="menu-view scroll-page">
    <div v-for="item in tree" :key="item.id" class="menu-group">
      <div v-if="item.submenu != undefined && item.submenu.length != 0" class="menu-title">{{item.name}}</div>
      <div v-else :class="'menu-item' + (item.id == active ? ' active': '')">
        <div class="left" @click="clickMenu(item.id,item.url)"><i :class="item.icon"></i>{{item.name}}</div>
      </div>
      <div v-for="item2 in item.submenu" :key="item2.id" :class="'menu-item' + (item2.id == active ? ' active': '')">
        <div class="left" @click="clickMenu(item2.id,item2.url)"><i :class="item2.icon"></i>{{item2.name}}</div>
      </div>
    </div>

<!--    <div class="menu-group">-->
<!--      <div class="menu-title">许可证</div>-->
<!--      <div class="menu-item active"><div class="left"><i class="iconfont icon-yinle"></i>许可证列表</div></div>-->
<!--      <div class="menu-item"><div class="left"><i class="iconfont icon-mv"></i>许可证申请</div></div>-->
<!--      <div class="menu-item"><div class="left"><i class="iconfont icon-diantai"></i>个性电台</div></div>-->
<!--      <div class="menu-item"><div class="left"><i class="iconfont icon-shoucang2"></i>明日之子第二季</div></div>-->
<!--    </div>-->

<!--    <div class="menu-group">-->
<!--      <div class="menu-title">常用工具</div>-->
<!--      <div class="menu-item"><div class="left"><i class="iconfont icon-shoucang hot"></i>翻译</div></div>-->
<!--      <div class="menu-item"><div class="left"><i class="iconfont icon-screen"></i>本地和下载</div></div>-->
<!--      <div class="menu-item"><div class="left"><i class="iconfont icon-lishi"></i>历史</div></div>-->
<!--      <div class="menu-item"><div class="left"><i class="iconfont icon-shiting"></i>使用列表</div></div>-->
<!--    </div>-->

<!--    <div class="menu-group">-->
<!--      <div class="menu-title"><div class="left">我创建的歌单</div><div class="right"><i class="iconfont icon-jia-copy"></i><i class="iconfont icon-xiangxia"></i></div></div>-->
<!--      <div class="menu-item"><div class="left"><i class="iconfont icon-yinyue"></i>wake me up</div></div>-->
<!--    </div>-->

<!--    <div class="menu-group">-->
<!--      <div class="menu-title"><div class="left">我收藏的歌单</div><div class="right"><i class="iconfont icon-xiangxia"></i></div></div>-->
<!--      <div class="menu-item"><div class="left"><i class="iconfont icon-yinyue"></i>Convoy</div></div>-->
<!--    </div>-->

  </el-scrollbar>
</template>

<script>
import router from "../../router";

export default {
name:'mene',
  data: function () {
    return {
      tree: {},
      active: this.$route.name
    }
  },
  methods: {
    async getTree() {
      let res = await this.$http.get('/api/permission/tree')
      this.tree = res.data
    },
    clickMenu(id,url) {
      this.active = id
      router.push(url)
    }
  },
  created: function() {
    this.getTree()
  },
  watch: {
    $route:{
      handler(val) {
        this.active = val.name
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.scroll-page {
  overflow: hidden;
  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}

.menu-view{
  flex: 1;
  overflow: hidden;

  .menu-group{
    margin-bottom: 25px;
    padding:0 20px;
    .menu-title{
      margin-bottom: 10px;
      font-size: 12px;
      padding-left: 10px;
      display: flex;
      align-items: center;
      color: #666;
      .left{
        flex:1;
      }
      .right{
        width: 80px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .iconfont{
          font-size: 14px;
          color: #888;
          margin-left: 10px;
        }

      }
    }
    .menu-item{
      padding: 5px 10px;
      font-size: 13px;
      border-radius: 2px;
      margin-bottom: 5px;
      cursor: pointer;
      .left{
        .iconfont{
          margin-right: 10px;
        }
        .iconfont.hot{
          color: #ff4400;
        }
      }
    }
    .menu-item:hover{
      background:#E6E7E7 ;
    }

    .menu-item.active{
      background:#31C27C ;
      color: #fff;
    }
  }

}
</style>
